import React, { Component } from 'react';
import {TestComponent} from './component.jsx';
import 'react-dom';

export default class Twelve extends Component {
    constructor (props) {
        super (props);
        this.state = {
            numer: 0
        }
    }

    componentWillMount() {
        // console.log('组件将要渲染');
    }

    componentDidMount() {
        // console.log('组件已经渲染完成');
        this.setState({
            number: 100
        })
    }

    handleChange (e) {
        //console.log(typeof e.target.value);
        let index = parseInt(e.target.value);
        console.log('index', index);
        if (index > 0 && index < 10) {
            let refName = 'input' + index;
            console.log(refName);
            console.log(this.refs[refName]);
            // inputDome = React.findDOMNode(this.refs[refName]);
            // inputDome =  this.refs[refName].getDOMNode();
            // getDOMNode()方法和findDOMNode貌似在这个里边儿已经被废弃；
            let inputDome = this.refs[refName];
            inputDome.focus();
        }
    }
    handleClick() {
        /**
         * 以下这两种取值方式对应的是ref="testRef";
        */
        // alert(this.refs.testRef.value)
        // this.refs.testRef.value = 100;

        /**
         * 再来看看ref={(testRef) => this.testRef = testRef}的取值方式；
        */
        alert(this.testRef.value);
    }
    render () {
        let inputs = [];
        for (let i = 0; i < 5; i++) {
            inputs.push(<div key={i}><li><input type="text" ref={"input" + i}/></li></div>)
        }
        return (
            <div>
                <label>在这里输入任意input框的索引，光标会自动聚焦到输入框内</label>
                <input type="text" id="input" onChange={this.handleChange.bind(this)}/>
                <hr />
                <ul>
                    {
                        inputs.map((item, index) => {
                            return (
                                <li key={index}>
                                    {item}
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                <TestComponent name="This is a TestComponent!">
                    <h1>LBJ</h1>
                    <h2>KB</h2>
                    <h3>KD</h3>
                </TestComponent>
                <hr/>
                {/*<button onClick={() => this.handleClick()}>TestRef</button>*/}
                {/*<input type="text" ref="testRef" />*/}
                {/*<input type="text" ref={(testRef) => this.testRef = testRef } />*/}
            </div>
        )
    }
}
